<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理员登录页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="login-page">
<!-- 登录框区域 -->
<div class="login-box row">
    <div class="img-box col-sm-6  col-md-6 col-lg-7 col-xl-7">
        <img src="pic/login-left.png" class="img-fluid" alt srcset>
    </div>
    <div class="login-container col-sm-6 col-md-6 col-lg-5 col-xl-5">

        <div class="tab-box">
            <span class="active tab-span" data-form="loginForm">密码登录</span>
            <span class="tab-span" data-form="codeForm">验证码登录</span>
        </div>
        <form id="loginForm">
            <div class="form-group">
                <label for="phoneNumber">手机号</label>
                <input class="form-control" type="text" id="phoneNumber"
                       name="phoneNumber"
                       required placeholder="请输入手机号">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input class="form-control" type="password"
                       id="password" name="password"
                       required placeholder="请输入密码">
            </div>
            <button type="submit"
                    class="btn btn-primary btn-block login-btn">登录</button>
            <div class="error"></div>
        </form>
        <!-- 验证码登录框 -->
        <form id="codeForm" style="display: none;">
            <div class="form-group">
                <label for="loginMobile">手机号</label>
                <input class="form-control" type="text" id="loginMobile"
                       name="loginMobile"
                       required placeholder="请输入手机号">
            </div>
            <div class="form-group">
                <label for="verificationCode">验证码</label>
                <div class="code-box">
                    <input class="form-control" type="text"
                           id="verificationCode" name="verificationCode"
                           required placeholder="请输入验证码">
                    <div class="btn btn-primary " id="getVerificationCode">获取验证码</div>
                </div>
            </div>
            <button type="submit"
                    class="btn btn-primary btn-block login-btn">登录</button>
            <div class="error"></div>
        </form>
        <div class="register-link">
            还没有账号，去<a href="register.html?admin=true">注册</a>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    $("#loginForm").validate({
        rules: {
            phoneNumber: "required",
            password: {
                required: true,
                minlength: 6
            }
        },
        messages: {
            phoneNumber: "请输入您的手机号",
            password: {
                required: "请输入密码",
                minlength: "密码长度至少为6个字符"
            }
        },
        submitHandler: function(form) {
            var loginName = $('#phoneNumber').val();
            var password = $('#password').val();
            // 清除之前的错误消息
            $('.error').text('');
            // 发送AJAX请求
            $.ajax({
                url: '/password/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({loginName: loginName, password: password, mandatoryIdentity: "ADMIN"}),
                success: function(result) {
                    if (result.code != 200) {
                        alert("登录失败！" + result.msg);
                    } else {
                        localStorage.setItem("user_token", result.data.token);
                        localStorage.setItem("user_identity", "ADMIN");
                        location.assign("admin.html");
                    }
                },
            });
            return false; // 阻止表单的默认提交行为
        }
    });

    // tab切换
    $('.tab-box span').click(function(e){
        let formId ='#' + e.target.dataset.form
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
        $('form').hide()
        console.log(formId)
        $(formId).show()
    })
    // 获取验证码
    var timer = null
    $('#getVerificationCode').click(function(e){
        console.log(e,$(this).text())
        var txt = $(this).text()
        var num = 60
        if(txt.indexOf('获取')!==-1){
            $('#getVerificationCode').text(num+'s')
            getCode()
            // 获取验证码接口
            timer&&clearInterval(timer)
            timer = setInterval(function(){
                if(num>1){
                    num--
                    $('#getVerificationCode').text(num+'s')
                }else{
                    timer&&clearInterval(timer)
                    $('#getVerificationCode').text('重新获取')
                }
            },1000)
        }
    })
    function getCode(){
        $.ajax({
            url: '/verification-code/send',
            type: 'GET',
            data:{ phoneNumber:$('#loginMobile').val() },
            success: function(result) {
                if (result.code != 200) {
                    timer&&clearInterval(timer)
                    $('#getVerificationCode').text('重新获取')
                    toastr.error('验证码获取失败');
                } else {
                    toastr.success('验证码发送成功')
                }
            },
        });
    }
    // 验证码登录
    $("#codeForm").validate({
        rules: {
            loginMobile: "required",
            verificationCode:"required",
        },
        messages: {
            loginMobile: "请输入您的手机号",
            verificationCode:  "请输入验证码",
        },
        submitHandler: function(form) {
            var loginMobile = $('#loginMobile').val();
            var verificationCode = $('#verificationCode').val();
            // 清除之前的错误消息
            $('.error').text('');
            // 发送AJAX请求
            $.ajax({
                url: '/message/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({loginMobile: loginMobile , verificationCode: verificationCode, mandatoryIdentity: "ADMIN"}),
                success: function(result) {
                    if (result.code != 200) {
                        alert("登录失败！" + result.msg);
                    } else {
                        localStorage.setItem("user_token", result.data.token);
                        localStorage.setItem("user_identity", "ADMIN");
                        location.assign("admin.html");
                    }
                },
            });
            return false; // 阻止表单的默认提交行为
        }
    });
</script>
</body>
</html>